<template>
	<div class="content" @touchmove.prevent>
		<div v-if="show_guide" class="guide-mask" @click="hideGuide"></div>
		<div class="guide" v-if="show_guide">
			<img class="guide-img" :src="guide" />
			<img class="guide-img3" :src="guide3" />
		</div>
		<div class="picture" id="download">
			<img class="picture-baseImg" :src="base_img" />
			<div class="logo-wrap">
				<img :src="bg_logo" class="bg-logo"/>
			</div>
			<div class="picture-design"></div>
			<div class="picture-footer-bg">
				<img width="100%" height="100%" class="picture-design-bg" fit="scale-down" :src="bottom_bg" />
			</div>
			<div class="picture-building">
				<img width="100%" height="100%" fit="scale-down" :src="building_img" />
			</div>
			<div class="picture-body">
				<img width="100%" height="100%" fit="scale-down" :src="body_img" />
				<div class="picture-body-clothes">
					<img width="100%" height="100%" fit="scale-down" :src="clothes_img" />
				</div>
			</div>
		</div>
		<div class="footer" v-if="show_choice">
			<div class="footer-tab">
				<div v-for="item in tabList" :key="item.id">
					<img
						@click="toggleNav(item.id)"
						width="50"
						height="50"
						fit="scale-down" 
						:src="navActive == item.id ? item.acImg: item.img" />
				</div>
				<van-image class="preview" width="50" @click="showChoice(false)" :src="preview_img" fit="scale-down"></van-image>
			</div>
			<div class="footer-choice">
				<div v-if="navActive == 1" class="footer-choice-item">
					<div
						v-for="item in elementImgList"
						:key="item.id"
						class="footer-choice-item-icon" 
						@click="changeBody(item.id)" >
						<img width="80" height="80" fit="scale-down" :src="item.img" />
						<img v-if="item.id == bodyActiveIndex" class="selected" :src="selected" />
					</div>
				</div>
				<div v-if="navActive == 2" class="footer-choice-item">
					<div
						v-for="item in buildingImgList"
						:key="item.id"
						class="footer-choice-item-icon" 
						@click="changeBuilding(item.id)" >
						<img width="80" height="80" fit="scale-down" :src="item.img" />
						<img v-if="item.id == buildingActiveIndex" class="selected" :src="selected" />
					</div>
				</div>
				<div v-if="navActive == 3" class="footer-choice-item">
					<div
						v-for="item in clothesImgList"
						:key="item.id"
						class="footer-choice-item-icon" 
						@click="changeClothes(item.id)" >
						<img width="80" height="80" fit="scale-down" :src="item.img" />
						<img v-if="item.id == clothesActiveIndex" class="selected" :src="selected" />
					</div>
				</div>
				<div v-if="navActive == 4" class="footer-choice-item">
					<div
						v-for="item in bottomImgList"
						:key="item.id"
						class="footer-choice-item-icon" 
						@click="changeBottom(item.id)" >
						<img width="80" height="80" fit="scale-down" :src="item.img" />
						<img v-if="item.id == bottomActiveIndex" class="selected" :src="selected" />
					</div>
				</div>
				<van-image @click="onDownloadPic" width="80" height="30" :src="next_button" fit="scale-down"></van-image>
			</div>
		</div>
		<div class="show-preview" v-else @click="showChoice(true)">
			<van-image width="80" height="40" :src="show_preview" fit="scale-down"></van-image>
		</div>
	</div>
</template>
<script>
import { Image, Button, Tab, Tabs, NavBar } from "vant";
import html2canvas from "html2canvas"
export default {
	name: "Picture",
	components: {
    	[Image.name]: Image,
		[Button.name]: Button,
		[Tab.name]: Tab,
		[Tabs.name]: Tabs,
		[NavBar.name]: NavBar
  	},
	data() {
	  return {
		is_active: true,
		show_guide: true,
		guide: 'http://h5static.weiyoho.com/assets/guide-1.png',
		guide3: 'http://h5static.weiyoho.com/assets/guide-3.png',
		navActive: 1,
		bodyActiveIndex: 1,
		clothesActiveIndex: 1,
		bottomActiveIndex: 1,
		buildingActiveIndex: 1,
		next_button: 'http://h5static.weiyoho.com/assets/picture/next.png',
		base_img: require('../assets/bg-red.png'),
		bg_logo: require('../assets/picture/logo.png'),
		building_img: '',
		body_img: '',
		clothes_img: '',
		bottom_bg: '',
		show_choice: true,
		downloadUrl: "",
		preview_img: 'http://h5static.weiyoho.com/assets/picture/preview.png',
		show_preview: 'http://h5static.weiyoho.com/assets/picture/show-preview.png',
		selected: 'http://h5static.weiyoho.com/assets/picture/sel.png',
		bodylist:[
			{ id: 1, img: require('../assets/picture/lion.png'),},
			{ id: 2, img: require('../assets/picture/carp.png'),},
			{ id: 3, img: require('../assets/picture/ingot.png'),},
		],
		buildinglist:[
			{ id: 1, img: require('../assets/picture/carp-building.png'), },
			{ id: 2, img: require('../assets/picture/lion-building.png'), },
			{ id: 3, img: require('../assets/picture/ingot-building.png'), },
		],
		clotheslist:[
			{ id: 1, img: require('../assets/picture/carp-clothes.png'), },
			{ id: 2, img: require('../assets/picture/lion-clothes.png'), },
			{ id: 3, img: require('../assets/picture/ingot-clothes.png'), },
		],
		bottomlist:[
			{
				id: 1,
				img: require('../assets/picture/carp-water.png'),
			},
			{
				id: 2,
				img: require('../assets/picture/lion-cloud.png'),
			},
			{
				id: 3,
				img: require('../assets/picture/ingot-sea.png'),
			}
		],
		tabList:[
			{
				id: 1,
				img: 'http://h5static.weiyoho.com/assets/picture/tab-element-01.png',
				acImg: 'http://h5static.weiyoho.com/assets/picture/tab-element-02.png'
			},
			{
				id: 2,
				img: 'http://h5static.weiyoho.com/assets/picture/tab-building-01.png',
				acImg: 'http://h5static.weiyoho.com/assets/picture/tab-building-02.png'
			},
			{
				id: 3,
				img: 'http://h5static.weiyoho.com/assets/picture/tab-clothes-01.png',
				acImg: 'http://h5static.weiyoho.com/assets/picture/tab-clothes-02.png'
			},
			{
				id: 4,
				img: 'http://h5static.weiyoho.com/assets/picture/tab-bottom-01.png',
				acImg: 'http://h5static.weiyoho.com/assets/picture/tab-bottom-02.png'
			}
		],
		elementImgList:[
			{ id: 1, img: 'http://h5static.weiyoho.com/assets/picture/element-01.png' },
			{ id: 2, img: 'http://h5static.weiyoho.com/assets/picture/element-02.png' },
			{ id: 3, img: 'http://h5static.weiyoho.com/assets/picture/element-03.png' },
		],
		buildingImgList:[
			{
				id: 1,
				img: 'http://h5static.weiyoho.com/assets/picture/building-01.png'
			},
			{
				id: 2,
				img: 'http://h5static.weiyoho.com/assets/picture/building-02.png'
			},
			{
				id: 3,
				img: 'http://h5static.weiyoho.com/assets/picture/building-03.png'
			}
		],
		clothesImgList:[
			{
				id: 1,
				img: 'http://h5static.weiyoho.com/assets/picture/clothes-01.png'
			},
			{
				id: 2,
				img: 'http://h5static.weiyoho.com/assets/picture/clothes-02.png'
			},
			{
				id: 3,
				img: 'http://h5static.weiyoho.com/assets/picture/clothes-03.png'
			}
		],
		bottomImgList: [
			{
				id: 1,
				img: 'http://h5static.weiyoho.com/assets/picture/bottom-01.png'
			},
			{
				id: 2,
				img: 'http://h5static.weiyoho.com/assets/picture/bottom-02.png'
			},
			{
				id: 3,
				img: 'http://h5static.weiyoho.com/assets/picture/bottom-03.png'
			}
		]
	  };
	},
	mounted() {
		this.building_img = this.buildinglist[0].img
		this.body_img = this.bodylist[0].img
		this.clothes_img = this.clotheslist[0].img
		this.bottom_bg = this.bottomlist[0].img
		localStorage.getItem("PICTURE") ? this.show_guide = false : localStorage.setItem("PICTURE", 1);
	},
	methods: {
		onDownloadPic() {
			html2canvas(document.querySelector("#download"), {
				useCORS: true,
				backgroundColor: null
				// scale: 2,
			}).then(canvas => {
				this.downloadUrl = canvas.toDataURL("image/jpeg");
				// localStorage.setItem("CANVAS_IMAGE", this.downloadUrl);
				this.$store.commit("updateDownloadImg", this.downloadUrl);
				this.$router.replace({ name: 'blessing', params: { downloadImg: this.downloadUrl }});
			});
		},
		toggleNav(index){
			this.navActive = index
		},
		/**
		 * @desc 改变身体
		 */
		changeBody(index){
			this.bodyActiveIndex = index
			this.body_img = this.bodylist[--index].img
		},
		/**
		 * @desc 改变门联
		 */
		changeBuilding(index){
			this.buildingActiveIndex = index
			this.building_img = this.buildinglist[--index].img
		},
		/**
		 * @desc 改变底部背景
		 */
		changeBottom(index){
			this.bottomActiveIndex = index
			this.bottom_bg = this.bottomlist[--index].img	
		},
		/**
		 * @desc 改变衣物
		 */
		changeClothes(index){
			this.clothesActiveIndex = index
			this.clothes_img = this.clotheslist[--index].img	
		},
		/**
		 * @desc 显示底部选择框
		 */
		showChoice(value){
			this.show_choice = value
		},
		hideGuide(){
			this.show_guide = false
		},
		/**
		 * @desc 跳转页面
		 */
		pageTo(url){
			// this.onDownloadPic();
			this.$router.replace(url)
		},
		onClickLeft() {
			this.$router.back();
		}
	}
}
</script>
<style lang="less" scoped="scoped">
.content{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	.guide-mask{
		width: 100vw;
		height: 100vh;
		position: absolute;
		background-color: #000000;
		opacity: 0.7;
		top: 0;
		left: 0;
		z-index: 999;
	}
	.guide-img{
		position: absolute;
		left: 0;
		bottom: 33vh;
		width: 180px;
		z-index: 999;
	}
	.guide-img3{
		position: absolute;
		right: 0;
		bottom: 15vh;
		width: 180px;
		z-index: 999;
	}
	.footer{
		position: absolute;
		bottom: -10px;
		left: 0;
		width: 100%;
		// height: 30%;
		&-tab{
			position: position;
			width: 100%;
			left: 0;
			bottom: 0;
			display: flex;
		}
		&-choice{
			position: relative;
			top: -10px;
			bottom: 0;
			padding: 10px;
			background: url(../assets/picture/pre-box.png) no-repeat;
			background-size: 100% 100%;
			&-item{
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				padding-bottom: 10px;
				&-icon{
					position: relative;
					width: 80px;
					height: 80px;
				}
			}
		}
		.selected{
			width: 20px;
			height: 20px;
			position: absolute;
			top: 65px;
			right: 20px;
		}
	}
}
.picture{
	width: 100%;
	height: 100vh;
	overflow: hidden;
	box-sizing: border-box;
	&-baseImg{
		width: 100%;
		height: 100%;
	}
	.logo-wrap {
		width: 100vw;
		display: flex;
		justify-content: center;
		position: absolute;
		top: 1vh;
		z-index: 2;

		.bg-logo {
			width: 84px;
			height: 27px;
		}
	}
	&-design{
		width: 100%;
		height: 100vh;
		background: url(../assets/picture/top-design.png) no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
	}
	&-footer-bg{
		position: absolute;
		width: 100vw;
		height: 100vh;
		// height: 70%;
		overflow: hidden;
		left: 0;
		bottom: -10px;
	}
	&-building,&-body{
		position: absolute;
		top: 0;
		width: 100%;
		height: 100vh;
		left: 0;
		overflow: hidden;
	}
	&-body{
		&-clothes{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			overflow: hidden;
		}
	}
}
.preview{
	position: absolute;
	top: 15px;
	right: 0;
}
.show-preview{
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 999;
}
</style>